<template>
	<view :class="['container','nitai',$store.state.theme.themeType]"
		:style="{'--color1':$store.state.theme.color1,'--color2':$store.state.theme.color2,'padding-top': 'var(--status-bar-height)','--nav_color':$store.state.theme.navColor,'--background':$store.state.theme.background,'height': 'calc(100vh - var(--status-bar-height))'}">
		<view class="top-search">
			<uni-icons type="left" class="back" size="24" @click="back()"></uni-icons>
			<search @change="e=>{keyword=e}" :focused="true" @confirm="search('suffix')"></search>
		</view>
		<view class="clear">
			<view class="nitai">
				<uni-icons @click="clear()" color="#F56C6C !important" type="trash-filled" size="26"></uni-icons>
				<text @click="clear()">清空</text>
			</view>
		</view>
		<view class="history">
			<view class="item" v-for="i,j in List" :keys="j" @click="search(i)">
				{{i}}
			</view>
		</view>
	</view>
</template>

<script>
	import search from '../../components/search.vue'
	export default {
		components: {
			search
		},
		data() {
			return {
				keyword: null,
				List: []
			};
		},
		onLoad() {
			this.List = uni.getStorageSync('history_search') || []
		},
		onShow() {

			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},
		onReady() {
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			clear() {
				uni.removeStorageSync('history_search')
				uni.showToast({
					icon: 'none',
					title: "清空成功"
				})
				this.List = uni.getStorageSync('history_search') || []
			},
			search(i) {
				if (i != 'suffix') this.keyword=i
				if (!this.keyword) {
					uni.showToast({
						icon: 'none',
						title: "搜索关键词不能为空"
					})
					return
				}
				let that = this
				if (i != 'suffix') {

					uni.navigateTo({
						url: "../results/results?keyword=" + this.keyword,
						success() {
							that.List.length ? that.List.splice(that.List.indexOf(i), 1) : null
							that.List.unshift(i)
							uni.setStorage({
								key: 'history_search',
								data: that.List
							})
						}
					})
					return
				}
				uni.navigateTo({
					url: "../results/results?keyword=" + this.keyword,
					success() {
						let index = that.List.indexOf(that.keyword)
						if (index > -1)
							that.List.splice(index, 1)
						that.List.unshift(that.keyword)
						uni.setStorage({
							key: 'history_search',
							data: that.List
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.container.dark {

		/deep/.uni-input-input {
			color: white !important;
		}

		/deep/.uni-icons {
			color: white !important;
		}

	}

	.container {
		background: var(--background);
		height: 100vh;

		.top-search {
			display: flex;
			align-items: center;
		}

		.back {
			padding: 5px;
			border-radius: 99px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: var(--background) !important;
			box-shadow: 10rpx 10rpx 15rpx var(--color1),
				-10rpx -10rpx 15rpx var(--color2);
			margin-left: 10px;
		}

		.clear {
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 20rpx 40rpx;
			color: #F56C6C;

			.nitai {
				padding: 10rpx;
				display: flex;
				align-items: center;
				border-radius: 999px;
				background: var(--background) !important;
				box-shadow: 10rpx 10rpx 15rpx var(--color1),
					-10rpx -10rpx 15rpx var(--color2);
			}
		}

		.history {
			padding: 20rpx 40rpx;
			display: flex;
			flex-wrap: wrap;

			.item {
				margin-right: 40rpx;
				margin-bottom: 30rpx;
				padding: 10rpx 20rpx;
				border-radius: 999px;
				background: var(--background) !important;
				box-shadow: 10rpx 10rpx 15rpx var(--color1),
					-10rpx -10rpx 15rpx var(--color2);
			}
		}

		/deep/ .uni-easyinput {
			padding: 20rpx;
			box-sizing: border-box;
			color: black !important;
		}

		/deep/.uni-easyinput__content {
			background: var(--nav_color);
			border: none;
		}

		/deep/.uni-icons {
			color: black !important;
		}

		/deep/.uni-input-placeholder {
			color: black !important;
		}

		/deep/.uni-input-input {
			color: black !important;
		}
	}
</style>
